<!DOCTYPE HTML>
<html>

<head>
	<meta charset="UTF-8" />
	<title>snowing snow</title>
	<style>
		body {
			background: #222;
		}

		@keyframes mysnow {
			0% {
				bottom: 100%;
				opacity: 0;
			}

			50% {
				opacity: 1;
				transform: rotate(1080deg);
			}

			100% {
				transform: rotate(0deg);
				opacity: 0;
				bottom: 0;
			}
		}

		@-webkit-keyframes mysnow {
			0% {
				bottom: 100%;
				opacity: 0;
			}

			50% {
				opacity: 1;
				-webkit-transform: rotate(1080deg);
			}

			100% {
				-webkit-transform: rotate(0deg);
				opacity: 0;
				bottom: 0;
			}
		}

		@-moz-keyframes mysnow {
			0% {
				bottom: 100%;
				opacity: 0;
			}

			50% {
				opacity: 1;
				-moz-transform: rotate(1080deg);
			}

			100% {
				-moz-transform: rotate(0deg);
				opacity: 0;
				bottom: 0;
			}
		}

		@-ms-keyframes mysnow {
			0% {
				bottom: 100%;
				opacity: 0;
			}

			50% {
				opacity: 1;
				-ms-transform: rotate(1080deg);
			}

			100% {
				-ms-transform: rotate(0deg);
				opacity: 0;
				bottom: 0;
			}
		}

		@-o-keyframes mysnow {
			0% {
				bottom: 100%;
				opacity: 0;
			}

			50% {
				opacity: 1;
				-o-transform: rotate(1080deg);
			}

			100% {
				-o-transform: rotate(0deg);
				opacity: 0;
				bottom: 0;
			}
		}

		.roll {
			position: absolute;
			opacity: 0;
			animation: mysnow 5s;
			-webkit-animation: mysnow 5s;
			-moz-animation: mysnow 5s;
			-ms-animation: mysnow 5s;
			-o-animation: mysnow 5s;
			height: 80px;
		}

		.div {
			position: fixed;
		}
	</style>
</head>

<body>
	<div id="snowzone">
	</div>
</body>
<script>
	(function () {
		function snow(left, height, src) {
			var div = document.createElement("div");
			var img = document.createElement("img");
			div.appendChild(img);
			img.className = "roll";
			img.src = src;
			div.style.left = left + "px";
			div.style.height = height + "px";
			div.className = "div";
			document.getElementById("snowzone").appendChild(div);
			setTimeout(function () {
				document.getElementById("snowzone").removeChild(div);
				// console.log(window.innerHeight); 
			}, 5000);
		}
		setInterval(function () {
			var left = Math.random() * window.innerWidth;
			var height = Math.random() * window.innerHeight;
			var src = "./img/snow.png"; //两张图片分别为"s1.png"、"s2.png" 
			snow(left, height, src);
		}, 500);
	})();
</script>

</html>